import { nextTick, onBeforeUnmount, onMounted, ref } from "vue"

export const useTransitionOpen = (el) =>{
    const styles = ref("height:110px")
    const isOpen = ref(false)

    const handleResize = (e) =>{
        if (isOpen.value) {
            const ele = document.querySelector(el)
            styles.value = `height:${ele.offsetHeight}px`
        }
    }
    
    onMounted(()=>{
        nextTick(()=>{
            handleResize()
        })
       window.addEventListener('resize', handleResize)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('resize', handleResize)
    })

    const setOpen = (flag) =>{
        isOpen.value = flag
        if(flag) {
            handleResize()
        } else {
            styles.value = "height:110px"
        }
    }
    return {
        isOpen,
        styles,
        setOpen
    }
}